<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>无标题文档</title>
		<!--框架必需start-->
		<script type="text/javascript" src="../../libs/js/jquery.js"></script>
		<script type="text/javascript" src="../../libs/js/language/cn.js"></script>
		<script type="text/javascript" src="../../libs/js/framework.js"></script>
		<link href="../../libs/css/import_basic.css" rel="stylesheet" type="text/css" />
		<link rel="stylesheet" type="text/css" id="skin" prePath="../../" />
		<link rel="stylesheet" type="text/css" id="customSkin" />
		<!--框架必需end-->
		
		<script src="../../libs/js/graphical/raphael.js" type="text/javascript"></script>
		<script src="../../libs/js/graphical/progress.js" type="text/javascript"></script>
		
		<script src="../../libs/thirdparty/highcharts/js/highcharts.js"></script>

		
		<link rel="stylesheet" type="text/css" href="style/style.css"/>
		<style type="text/css">
			body{
				background: #F1F5F6;
			}
			#holder {
                position: relative;
                width: 150px;
                height: 150px;
                /*margin: 10px auto;*/
               float: left;
               margin: 40px;
            }
		    .ring_text1{
		        position: absolute;
		        top:40%;
		        left: 0px;
		        color: #292929;
		        /*font-weight: bold;*/
		        width: 100%;
		        text-align: center;
		    }
			.ring_text1 p{
				font-size: 30px;
				
			}
			.ring_text1 span{
				font-size: 12px;
			}
			#holder2 {
                position: relative;
                width: 450px;
                height: 300px;
                /*margin: 10px auto;*/
            }
			
			#holder2 .title_name{
				position: absolute;
				width: 400px;
			}
			#holder2 .title_name span{
				font-size: 12px;
				float: left;
			}
			#holder2 .title_name span.right{
				float: right;
			}
			.title_1{
				left: 25px;
				top: 20px;
			}
			.title_2{
				left: 25px;
				top: 70px;
			}
			.title_3{
				left: 25px;
				top: 120px;
			}
			.title_4{
				left: 25px;
				top: 170px;
			}
			.title_5{
				left: 25px;
				top: 220px;
			}
		</style>
	</head>

	<body>
		<div class="content_1">
			<ul class="list">
				<li>
					<b></b>
					<div class="text">
						<p>Average Rate</p>
						<p><span>99.6</span> % <i></i></p>
						<p class="green">+0.02%</p>
					</div>
					<div class="clear"></div>
				</li>
				<li>
					<b></b>
					<div class="text">
						<p>Average Rate</p>
						<p><span>99.6</span> % <i></i></p>
						<p class="green">+0.02%</p>
					</div>
					<div class="clear"></div>
				</li>
				<li>
					<b></b>
					<div class="text">
						<p>Average Rate</p>
						<p><span>99.6</span> % <i></i></p>
						<p class="green">+0.02%</p>
					</div>
					<div class="clear"></div>
				</li>
				<li>
					<b></b>
					<div class="text">
						<p>Average Rate</p>
						<p><span>99.6</span> % <i></i></p>
						<p class="green">+0.02%</p>
					</div>
					<div class="clear"></div>
				</li>
				<div class="clear"></div>
			</ul>
		</div>
		<table border="0" cellspacing="0" cellpadding="0" style="width: 100%;">
			<tr>
				<td style="width: 100%;">
					<div class="content_2" style="height: 350px;">
						<div class="content_2_cont">
							<div class="title">
								<span>Performance</span>
								<div class="right">
									<span>Month</span>
									<span>Week</span>
									<span class="active">21-04-2016</span>
								</div>
								<div class="clear"></div>
							</div>
							<div id="container" style="width: 100%; height: 300px; margin: 0 auto"></div>
						</div>
					</div>
				</td>
				<td style="width: 600px;">
					<div style="width:600px;height: 350px;" >
						<div class="content_2_cont content_3_cont">
							<div class="title">
								<span>Failure Rate</span>
								<div class="right">
									<span>All</span>
									<span class="active">NanJing</span>
								</div>
								<div class="clear"></div>
							</div>
							<div id="holder">
					            <div class="ring_text1">
					            	<p>75%</p>
					            	<span>Failure Rate</span>
					            </div>
					    	</div>
					    	<div class="text">
					    		<div class="text_content">
					    			<span>1463</span>
					    			<p>Empty <span>26%</span></p>
					    		</div>
					    		<div class="text_content">
					    			<span>1463</span>
					    			<p>Empty <span>26%</span></p>
					    		</div>
					    		<div class="text_content">
					    			<span>1463</span>
					    			<p>Empty <span>26%</span></p>
					    		</div>
					    		<div class="text_content">
					    			<span>1463</span>
					    			<p>Empty <span>26%</span></p>
					    		</div>
					    		<div class="text_content">
					    			<span>1463</span>
					    			<p>Empty <span>26%</span></p>
					    		</div>
					    		<div class="text_content">
					    			<span>1463</span>
					    			<p>Empty <span>26%</span></p>
					    		</div>
					    		<div class="clear"></div>
					    	</div>
						</div>
					</div>
				</td>
			</tr>
		</table>
		<table border="0" cellspacing="0" cellpadding="0" style="width: 100%;">
			<tr>
				<td style="width: 100%;">
					<div class="content_2 content_4" style="height: 350px;">
						<div class="content_2_cont content_4_cont">
							<div class="title">
								<span>Breakdowns</span>
								<div class="right">
									<span>View All:26</span>
								</div>
								<div class="clear"></div>
							</div>
							<ul>
								<li>
									<div class="left">
										<p><span>Qutage #1</span> -11:20 A.M</p>
										<p>143 Xuanwu Street,Xuanwu District,Nanjing</p>
									</div>
									<div class="right">
										<span>Lucas</span>
										<p>133-1329-8676</p>
									</div>
									<div class="clear"></div>
								</li>
								<li>
									<div class="left">
										<p><span>Qutage #1</span> -11:20 A.M</p>
										<p>143 Xuanwu Street,Xuanwu District,Nanjing</p>
									</div>
									<div class="right">
										<span>Lucas</span>
										<p>133-1329-8676</p>
									</div>
									<div class="clear"></div>
								</li>
								<li>
									<div class="left">
										<p><span>Qutage #1</span> -11:20 A.M</p>
										<p>143 Xuanwu Street,Xuanwu District,Nanjing</p>
									</div>
									<div class="right">
										<span>Lucas</span>
										<p>133-1329-8676</p>
									</div>
									<div class="clear"></div>
								</li>
								<li>
									<div class="left">
										<p><span>Qutage #1</span> -11:20 A.M</p>
										<p>143 Xuanwu Street,Xuanwu District,Nanjing</p>
									</div>
									<div class="right">
										<span>Lucas</span>
										<p>133-1329-8676</p>
									</div>
									<div class="clear"></div>
								</li>
								<li>
									<div class="left">
										<p><span>Qutage #1</span> -11:20 A.M</p>
										<p>143 Xuanwu Street,Xuanwu District,Nanjing</p>
									</div>
									<div class="right">
										<span>Lucas</span>
										<p>133-1329-8676</p>
									</div>
									<div class="clear"></div>
								</li>
							</ul>
						</div>
					</div>
				</td>
				<td style="width: 600px;">
					<div class="content_4" style="width:600px;height: 350px;">
						<div class="content_2_cont content_3_cont">
							<div class="title">
								<span>Rank</span>
								<div class="right">
									<span>View All:26</span>
								</div>
								<div class="clear"></div>
							</div>
							<div id="holder2">
						        <div class="title_name title_1">
						        	<span>1.Nanjing 7983 machines</span>
						        	<span class="right">99.8%</span>
						        </div>
						        <div class="title_name title_2">
						        	<span>1.Nanjing 7983 machines</span>
						        	<span class="right">99.8%</span>
						        </div>
						        <div class="title_name title_3">
						        	<span>1.Nanjing 7983 machines</span>
						        	<span class="right">99.8%</span>
						        </div>
						        <div class="title_name title_4">
						        	<span>1.Nanjing 7983 machines</span>
						        	<span class="right">99.8%</span>
						        </div>
						        <div class="title_name title_5">
						        	<span>1.Nanjing 7983 machines</span>
						        	<span class="right">99.8%</span>
						        </div>
						    </div>

						</div>
					</div>
				</td>
			</tr>
		</table>
		
	<script>
		$(function () {
			
			var color_val='#2DA9FA';
		    if(themeColor=="royal_blue"){
		    	color_val='#649BF6';
		    }else if(themeColor=="blue"){
		    	color_val='#2DA9FA';
		    }else if(themeColor=="cornflowerblue"){
		    	color_val='#609EE9';
		    }else if(themeColor=="grassgreen"){
		    	color_val='#63BF5C';
		    }else if(themeColor=="green"){
		    	color_val='#1fc695';
		    }else if(themeColor=="navyblue"){
		    	color_val='#2D3244';
		    }else if(themeColor=="skyblue"){
		    	color_val='#6bc1f2';
		    }else if(themeColor=="skyblue_plus"){
		    	color_val='#6bc1f2';
		    }else if(themeColor=="mintgreen_plus"){
		    	color_val="#74D6DD"
		    }else if(themeColor=="mintgreen"){
		    	color_val="#74D6DD"
		    };
			
			
			var radius = 70;
		    var paramBg = {stroke: "#D6D6D6", "stroke-width": 5};
		    var paramGreen = {stroke: "#FF6428", "stroke-width": 6,"stroke-linecap":"round"};
		    
		    
		    var rectWidth = 400;          
		    var paramBg2 = {stroke: "#ebf1f7", "stroke-width": 8};
		    var paramBlue = {stroke: color_val, "stroke-width": 8};
		
		    
			
			
			
			var paper =initPaper("holder", 150, 150);   
	        //paper,current,min,max,cx,cy,radius,param,paramBg
	        drawRingProgress(paper,23,0,30,75,75,radius,paramGreen,paramBg);
			
			var paper =initPaper("holder2", 450, 300);   
	        drawRectProgress(paper,76,0,100,30,50,rectWidth,paramBlue,paramBg2);
	        drawRectProgress(paper,89,0,100,30,100,rectWidth,paramBlue,paramBg2);
	        drawRectProgress(paper,68,0,100,30,150,rectWidth,paramBlue,paramBg2);
	        drawRectProgress(paper,88,0,100,30,200,rectWidth,paramBlue,paramBg2);
	        drawRectProgress(paper,98,0,100,30,250,rectWidth,paramBlue,paramBg2);

			
			
			
			
			
	        $('#container').highcharts({
	            chart: {
	                type: 'areaspline'
	            },
	            title: {
	                text: ''
	            },
	            legend: {
	                layout: 'vertical',
	                align: 'left',
	                verticalAlign: 'top',
	                x: 150,
	                y: 100,
	                floating: true,
	                borderWidth: 1,
	                backgroundColor: '#FFFFFF'
	            },
	            xAxis: {
	                categories: [
	                     '星期一',
	                    '星期二',
	                    '星期三',
	                    '星期四',
	                    '星期五',
	                    '星期六',
	                    '星期日'
	                ]
	            },
	            yAxis: {
	                title: {
	                    text: ''
	                }
	            },
	            tooltip: {
	                shared: true,
	                valueSuffix: ' %'
	            },
	            credits: {
	                enabled: false
	            },
	            plotOptions: {
	                areaspline: {
	                    fillOpacity: 0.5
	                }
	            },
	            series: [{
	                name: 'Today',
	                data: [3, 4, 3, 5, 4, 10, 12]
	            }, {
	                name: 'Yesterday',
	                data: [1, 3, 4, 3, 3, 5, 4]
	            }],
	            colors:['#1BCBB4','#6BC1F2']
	        });
	    });
	</script>

	</body>

</html>